/** @jsx jsx */;
import {keyframes,ClassNames, css, jsx } from '@emotion/react'
import classNames from 'classnames';
import { Menu, MenuItem } from "./ContextMenu3";
import React from 'react'
import Dialog from './Dialog'
const css_global=css`
  font-family: sans-serif;
  text-align: center;
`
export default function App() {
  const [state,setState]=React.useState({
    open:false,
    show_menu:false,
  })
  const newTab=()=>{
    setState((state)=>({...state,open:true}));
    console.log("new tab in main App")
  }
  console.log("App=================")
  console.log(state);
  return (
    <div css={css_global}>
      <h1>Floating UI Context Menu</h1>
      <p >Right click on the page!</p>
      <Menu>
        <MenuItem onClick={newTab} label="open dialog"></MenuItem>
        <MenuItem onClick={()=>{
          console.log("new window")
        }}label="New window" />
        <MenuItem label="Close tab" disabled />
      </Menu>
      <Dialog open={state.open} onOpenChange={(v)=>{
          console.log("onOpenChange-----------------------------");
          console.log(v);
          setState((state)=>({...state,open:v}));
      }}>
            <h1 id={123}>This is a dialog!</h1>
            <p id={"hello"}>
              Now that we've got your attention, you can close 
            </p>
            <button onClick={()=>{
              setState((state)=>({...state,open:false}));
            }}>Close</button>
      </Dialog>
    </div>
  );
}
